<template>
  <div class="content">
    <div class="head">
      <div class="s">
        <span class="s-top">{{ t("全部余额") }}</span>
        <span class="s-bot">
          <span class="s1"></span>
          <span class="s2">168</span>
          <span class="s3">.62</span>
        </span>
      </div>
      <div class="s">
        <span class="s-top">{{ t("今日分成") }}</span>
        <span class="s-bot">
          <span class="s1">{{ $t("公共.货币符号") }}</span>
          <span class="s2">168</span>
          <span class="s3">.62</span>
        </span>
      </div>
    </div>
    <div class="nav">
      <span class="item">{{ t("收支明细") }}</span>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%" :show-header="false">
        <el-table-column>
          <template slot-scope="scope">
            <el-row class="title" pros="title">{{ scope.row.title }}</el-row>
            <el-row class="subTitle" pros="subTitle">{{
              scope.row.subTitle
            }}</el-row>
          </template>
        </el-table-column>
        <el-table-column :align="'right'">
          <template slot-scope="scope">
            <el-row class="price" pros="util"
              >{{ scope.row.util }}{{ $t("公共.货币符号")
              }}{{ scope.row.price }}</el-row
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          title: "奇先生妙小姐作品分成",
          subTitle: "202-01-03 20:00:00",
          util: "-",
          price: "111",
        },
        {
          title: "奇先生妙小姐作品分成",
          subTitle: "202-01-03 20:00:00",
          util: "+",
          price: "111",
        },
        {
          title: "奇先生妙小姐作品分成",
          subTitle: "202-01-03 20:00:00",
          util: "-",
          price: "111",
        },
        {
          title: "奇先生妙小姐作品分成",
          subTitle: "202-01-03 20:00:00",
          util: "+",
          price: "111",
        },
      ],
    };
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`我的钱包.${v}`);
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .el-table__cell {
  border: none !important;
}
::v-deep .cell {
  margin-top: 20px;
}
.content {
  margin-left: 20%;
  width: 60%;

  .head {
    margin-top: 85px;
    width: 100%;
    height: 174px;
    background: #ff5757;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;

    .s {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;

      .s-top {
        font-size: 26px;
        color: #fff;
        font-weight: bold;
      }

      .s-bot {
        margin-top: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        flex-direction: row;
        color: #fff;

        .s1 {
          font-size: 26px;
          font-weight: bold;
        }

        .s2 {
          font-size: 46px;
          font-weight: bold;
        }

        .s3 {
          font-size: 26px;
          font-weight: bold;
        }
      }
    }
  }

  .nav {
    position: relative;
    z-index: 1;
    height: 97px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: row;

    .item {
      position: relative;
      z-index: 2;
      padding-bottom: 17px;
      font-size: 24px;
      color: #222;
      border-bottom: 1px solid #ff5757;
    }
  }

  .table {
    .title {
      color: #222;
      font-size: 24px;
      font-weight: bold;
    }

    .subTitle {
      margin-top: 10px;
      color: #222;
      font-size: 22px;
      font-weight: 400;
    }

    .price {
      color: #222;
      font-size: 24px;
      font-weight: bold;
    }
  }
}
</style>
